<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>
  Hantsy
  
  Bai
  
  
  | Launch my homepage
  
</title>
<meta name="description" content="My personal website focusing on Java EE/Jakarta EE and Spring.
">

<!-- Open Graph -->


<!-- Bootstrap & MDB -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
  rel="stylesheet" integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css"
  integrity="sha512-RO38pBRxYH3SoOprtPTD86JFOclM51/XTIdEPh5j8sj4tp8jmQIx26twG52UaLi//hQldfrh7e51WzP9wuP32Q==" crossorigin="anonymous" />

<!-- Fonts & Icons -->
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
  integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.0/css/academicons.min.css"
  integrity="sha512-W4yqoT1+8NLkinBLBZko+dFB2ZbHsYLDdr50VElllRcNt2Q4/GSs6u71UHKxB7S6JEMCp5Ve4xjh3eGQl/HRvg==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons">

<!-- Code Syntax Highlighting -->
<link rel="stylesheet"
  href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/github.css" />

<!-- Styles -->
<link rel="shortcut icon" href="/assets/img/favicon.ico">
<link rel="stylesheet" href="/assets/css/main.css">

<link rel="canonical" href="/blog/2021/jekyll/">

<!-- JQuery -->
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>


<!-- Theming-->

<script src="/assets/js/theme.js"></script>
<!-- Load DarkMode JS -->
<script src="/assets/js/dark_mode.js"></script>



<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-18SZ2W3GXD"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());

  gtag('config', 'G-18SZ2W3GXD');
</script>




  
<!-- MathJax -->
<script type="text/javascript">
  window.MathJax = {
    tex: {
      tags: 'ams'
    }
  };
</script>
<script defer type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3.1.2/es5/tex-mml-chtml.js"></script>
<script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>


  <link type="application/atom+xml" rel="alternate" href="/feed.xml" title="blank" />
  <!-- Begin Jekyll SEO tag v2.7.1 -->
<meta name="generator" content="Jekyll v3.9.0" />
<meta property="og:title" content="Launch my homepage" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Share the pieces of work during building my homepage" />
<meta property="og:description" content="Share the pieces of work during building my homepage" />
<meta property="og:site_name" content="blank" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2021-03-03T12:34:00+00:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Launch my homepage" />
<script type="application/ld+json">
{"datePublished":"2021-03-03T12:34:00+00:00","description":"Share the pieces of work during building my homepage","mainEntityOfPage":{"@type":"WebPage","@id":"/blog/2021/jekyll/"},"url":"/blog/2021/jekyll/","@type":"BlogPosting","headline":"Launch my homepage","dateModified":"2021-03-03T12:34:00+00:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->

</head>

<body
  class="fixed-top-nav ">

  <!-- Header -->

  <header>

    <!-- Nav Bar -->
    <nav id="navbar" class="navbar navbar-light navbar-expand-sm fixed-top">
    <div class="container">
      
      <a class="navbar-brand title font-weight-lighter" href="/">
       <span class="font-weight-bold">Hantsy</span>   Bai
      </a>
      
      <!-- Navbar Toggle -->
      <button class="navbar-toggler collapsed ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>
      <div class="collapse navbar-collapse text-right" id="navbarNav">
        <ul class="navbar-nav ml-auto flex-nowrap">
          <!-- About -->
          <li class="nav-item ">
            <a class="nav-link" href="/">
              about
              
            </a>
          </li>
          
          <!-- Blog -->
          <li class="nav-item active">
            <a class="nav-link" href="/blog/">
              blog
              
            </a>
          </li>
          
          <!-- Other pages -->
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          <li class="nav-item ">
              <a class="nav-link" href="/projects/">
                projects
                
              </a>
          </li>
          
          
          
          <li class="nav-item ">
              <a class="nav-link" href="/publications/">
                publications
                
              </a>
          </li>
          
          
          
          <li class="nav-item ">
              <a class="nav-link" href="/service/">
                service
                
              </a>
          </li>
          
          
          
            <div class = "toggle-container">
              <a id = "light-toggle">
                  <i class="fas fa-moon"></i>
                  <i class="fas fa-sun"></i>
              </a>
            </div>
          
        </ul>
      </div>
    </div>
  </nav>

</header>


  <!-- Content -->

  <div class="container mt-5">
    

<div class="post">

  <header class="post-header">
    <h1 class="post-title">Launch my homepage</h1>
    <p class="post-meta">March 3, 2021</p>
  </header>

  <article class="post-content">
    <p>These days I was trying to start my personal homepage. It is open to the public now. Open your browser and navigate to <a href="https://hantsy.github.io">https://hantsy.github.io</a>.</p>

<p>In this post, I will introduce how I created it using <a href="https://pages.github.com/">Github Pages</a> and <a href="https://jekyllrb.com/">Jekyll</a>.</p>

<p>In the past years, I have written a lot of blog entries on <a href="https://hantsy.blogspot.com">blogspot</a> and <a href="https://hantsy.medium.com">Medium</a>, the new homepage will be a central place to aggregate all resources, including blog entries, development notes, etc.</p>

<h2 id="personal-homepage">Personal HomePage</h2>

<p>Follow the guide of <a href="https://pages.github.com/">Github Pages</a>, firstly create a repository named <code class="language-plaintext highlighter-rouge">&lt;your github name&gt;.github.io</code>, it will be built automatically by a built-in GitHub Pages workflow and deployed to <code class="language-plaintext highlighter-rouge">https://&lt;your github name&gt;.github.io</code>.</p>

<p><a href="https://jekyllrb.com/">Jekyll</a> is used for building static websites and blogs from markdown text documents. Github Pages has built-in Jekyll support.</p>

<p>Jekyll website has a great <a href="https://jekyllrb.com/docs/step-by-step/01-setup/">step-by-step tutorial</a> to help you to set up a Jekyll driven static website from scratch. Once you have understood how Jekyll works, you can choose an existing template or themes to speed up the website building. There are plenty of themes in <a href="https://jekyllrb.com/showcase/">Jekyll showcases</a> and <a href="http://jekyllthemes.org/">Jekyll Themes</a> which can reuse in your private website. After doing some research I finally choose <a href="https://github.com/alshedivat/al-folio">alshedivat/al-folio</a>.</p>

<p>The best way to reuse  <a href="https://github.com/alshedivat/al-folio">alshedivat/al-folio</a> is cloning it and renaming it to  <code class="language-plaintext highlighter-rouge">&lt;your github name&gt;.github.io</code>.  But I’ve created a repository(<code class="language-plaintext highlighter-rouge">hantsy.github.io</code>). When I cloned it into my local machine and pushed it into my Github repository, I encountered a small issue, check <a href="https://github.com/alshedivat/al-folio/issues/208">alshedivat/al-folio#208</a>.</p>

<p>The <a href="https://github.com/alshedivat/al-folio">alshedivat/al-folio</a> includes two branches: <code class="language-plaintext highlighter-rouge">source</code> and <code class="language-plaintext highlighter-rouge">master</code>. It includes a Github actions workflow to automate the build progress. Any modification in the source branch will deploy to the master branch.</p>

<p>Install the dependencies.</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">install</span>
</code></pre></div></div>

<p>Build the project.</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll build
</code></pre></div></div>

<p>Run it in a local dev environment.</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve
</code></pre></div></div>

<p>The next step is to configure the website information.  Open <code class="language-plaintext highlighter-rouge">_config.yml</code> in the project root folder,  set the essential properties, eg.  first_name, last_name, description etc. And change the profile info in the  <code class="language-plaintext highlighter-rouge">about</code> page, replace the photo image with yours on the about page.</p>

<h2 id="import-medium-posts">Import Medium Posts</h2>

<p>I have maintained my current blog on <a href="https://hantsy.medium.com">Medium</a>, I do not want to duplicate the work and republish all posts on the <code class="language-plaintext highlighter-rouge">posts</code> page again. I think the best way is to sync the posts automatically.</p>

<p>After researching myself and discussing with the Jekyll gurus from <a href="https://talk.jekyllrb.com">Jekyll Talk</a>, I decided to use the <a href="https://import.jekyllrb.com/docs/rss/">official RSS Importer</a> in a standalone <a href="https://github.com/hantsy/hantsy.github.io/blob/source/.github/workflows/medium-sync.yml">Github actions workflow</a> to sync the posts.</p>

<p>The solution is not ideal but works well. It will be changed in the future if I found better solutions.</p>

<p>It is easy to enable <a href="https://analytics.google.com">Google Analytics</a> and <a href="https://disqus.com/">Disqus</a>, just go to their website and register your website and set the ID in the <code class="language-plaintext highlighter-rouge">_config.yml</code>.</p>

<h2 id="display-github-projects">Display Github Projects</h2>

<p>The <a href="https://github.com/alshedivat/al-folio">alshedivat/al-folio</a> itself includes a <code class="language-plaintext highlighter-rouge">jekyll-github-metadata</code> plugin to access the metadata of Github repositories.</p>

<p>To replace projects in the  <code class="language-plaintext highlighter-rouge">projects</code> page, I changed the  <code class="language-plaintext highlighter-rouge">_pages/projects.md</code> to the following.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html">// omitted the page headers
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"projects"</span><span class="nt">&gt;</span>
  {% assign sorted_projects = site.github.public_repositories | sort: "stargazers_count"|reverse  %}
  {% for project in sorted_projects %}
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card hoverable mt-2"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"card-title text-lowercase"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"{{ project.html_url }}"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">&gt;</span>{{ project.name }}<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/h5&gt;</span>
       <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"card-subtitle mb-2 text-muted"</span><span class="nt">&gt;</span>{{project.language}} <span class="ni">&amp;bull;</span> <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-star"</span><span class="nt">&gt;&lt;/i&gt;</span> {{project.stargazers_count}} <span class="nt">&lt;/h6&gt;</span>
      <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>{{ project.description }}<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  {% endfor %}
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<p>There is no need a access token to read the metadata of the Github public repositories. More details see <a href="https://github.com/jekyll/github-metadata">jekyll/github-metadata</a>.</p>

<h2 id="gather-my-docs">Gather my Docs</h2>

<p>In the past years, I have written plenty of docs via blog entries, project wikis, etc. The Github Pages also support Jekyll-driven static web pages for single repository.</p>

<p>There is a <em>Github Pages</em> option in the repository settings page, set it to discover docs from <code class="language-plaintext highlighter-rouge">master</code> branch and <em>docs</em> folder. Then create an <code class="language-plaintext highlighter-rouge">index.md</code> in the <em>docs</em> folder. In general, the <code class="language-plaintext highlighter-rouge">index.md</code> should contain a table of content for all documents in the <em>docs</em> folder.</p>

<p>After it is done, the <em>docs</em> for the repository are available via <code class="language-plaintext highlighter-rouge">http://hantsy.github.io/&lt;your repository name&gt;</code> , eg.  <a href="https://hantsy.github.io/jakartaee9-starter-boilerplate/">https://hantsy.github.io/jakartaee9-starter-boilerplate/</a> is the online docs address for the repository <a href="https://github.com/hantsy/jakartaee9-starter-boilerplate">hantsy/jakartaee9-starter-boilerplate</a>.</p>

<p>Some of my docs are available on GitBook.io, where it provides a better web UI to read online.</p>

<p>The <a href="https://github.com/alshedivat/al-folio">alshedivat/al-folio</a> itself includes a <code class="language-plaintext highlighter-rouge">publications</code> page and enables  <code class="language-plaintext highlighter-rouge">jekyll-scholar</code> to display the essays, books, etc. I reuse it to organize my docs.</p>

<p>Go to the <a href="https://hantsy.github.io/publications/">publications</a> to browse all the docs I have gathered till now.</p>

<ul>
  <li><a href="https://hantsy.github.io/jakartaee9-starter-boilerplate/">Upgrade to Jakarta EE 9</a></li>
  <li><a href="https://hantsy.github.io/spring-r2dbc-sample/">Spring R2dbc by Examples</a></li>
  <li><a href="https://hantsy.github.io/nestjs-sample/">Building RESTful APIs with NestJS</a></li>
  <li><a href="https://hantsy.github.io/jakartaee8-starter-boilerplate/">Kickstart a Jakarta EE 8 Application</a></li>
  <li><a href="https://hantsy.github.io/rsocket-sample/">RSocket by Examples</a></li>
  <li><a href="https://hantsy.github.io/quarkus-sandbox/">Quarkus by Examples</a></li>
  <li><a href="https://hantsy.github.io/helidon-sandbox/">Helidon by Examples</a></li>
  <li>etc.</li>
</ul>

<h2 id="resources">Resources</h2>

<ul>
  <li><a href="https://pages.github.com/">Github Pages</a></li>
  <li><a href="https://talk.jekyllrb.com/t/how-to-merge-medium-posts-and-local-posts-in-the-blog-list-page/5728">Embed Medium Blog Posts in Website</a></li>
  <li><a href="https://jonbake.com/blog/2019/08/02/creating-a-hybrid-jekyll-medium-blog.html">Creating a Hybrid Jekyll/Medium Blog</a></li>
  <li><a href="https://medium.com/@jameshamann/displaying-medium-posts-on-your-jekyll-website-7eef230309e4">Displaying Medium Posts on Your Jekyll Website</a></li>
  <li><a href="https://blog.mastykarz.nl/improve-jekyll-seo/">How I improved my Jekyll SEO</a></li>
  <li><a href="https://aregsar.com/blog/2019/how-to-customize-your-github-pages-blog-layout-in-five-minutes/">How to customize your github pages blog layout in five minutes</a></li>
</ul>

  </article>

  
    <div id="disqus_thread"></div>
    <script type="text/javascript">
      var disqus_shortname  = 'hantsy';
      var disqus_identifier = '/blog/2021/jekyll';
      var disqus_title      = "Launch my homepage";
      (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  

</div>

  </div>

  <!-- Footer -->

  
<footer class="fixed-bottom">
  <div class="container mt-0">
    &copy; Copyright 2021 Hantsy  Bai.
    <span class="mr-auto"></span>
    Powered by <a href="http://jekyllrb.com/" target="_blank">Jekyll</a> with <a href="https://github.com/alshedivat/al-folio">al-folio</a> theme.

    
    

  </div>
</footer>



</body>

<!-- Bootsrap & MDB scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js" integrity="sha512-eUQ9hGdLjBjY3F41CScH3UX+4JDSI9zXeroz7hJ+RteoCaY+GP/LDoM8AO+Pt+DRFw3nXqsjh9Zsts8hnYv8/A==" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha512-M5KW3ztuIICmVIhjSqXe01oV2bpe248gOxqmlcYrEzAvws7Pw3z6BK0iGbrwvdrUQUhi3eXgtxp5I8PDo9YfjQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js" integrity="sha512-Mug9KHKmroQFMLm93zGrjhibM2z2Obg9l6qFG2qKjXEXkMp/VDkI4uju9m4QKPjWSwQ6O2qzZEnJDEeCw0Blcw==" crossorigin="anonymous"></script>


<!-- Mansory & imagesLoaded -->
<script defer src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script defer src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script defer src="/assets/js/mansory.js" type="text/javascript"></script>





<!-- Load Common JS -->
<script src="/assets/js/common.js"></script>


</html>
